<template>
  <view class="character-outline-container">
    <image 
      v-if="outlineUrl && !imageError" 
      :src="outlineUrl" 
      class="outline-image"
      mode="aspectFit"
      @error="handleImageError"
    />
    <view v-else class="fallback-outline">
      <text class="fallback-text">{{character}}</text>
    </view>
  </view>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: 'CharacterOutline',
  props: {
    character: {
      type: String,
      required: true
    },
    strokeColor: {
      type: String,
      default: '#cccccc'
    },
    outlineWidth: {
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      outlineUrl: '',
      imageError: false
    }
  },
  watch: {
    character: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.generateOutlineUrl(newVal);
        }
      }
    }
  },
  methods: {
    // 生成汉字描边URL
    generateOutlineUrl(char) {
      // 这里可以根据实际情况选择:
      // 1. 使用服务端生成的描边图片
      // 2. 使用在线API服务生成
      
      // 示例: 使用百度汉语的描边图片（需要替换为实际可用的API）
      this.outlineUrl = `https://hanyu-word-gif.cdn.bcebos.com/word_gif/${encodeURIComponent(char)}_bd_outline.png`;
      
      // 备用方案: 如果没有特定API，可以使用汉字GIF动画的最后一帧或者静态图
      if (!this.outlineUrl) {
        this.outlineUrl = `https://hanyu-word-gif.cdn.bcebos.com/word_gif/${encodeURIComponent(char)}_static.png`;
      }
    },
    
    // 处理图片加载错误
    handleImageError() {
      console.error('汉字描边图片加载失败');
      this.imageError = true; // 标记图片加载失败
      this.outlineUrl = ''; // 清空URL，触发fallback模式
    }
  }
})
</script>

<style>
.character-outline-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outline-image {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

.fallback-outline {
  width: 90%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #cccccc;
  border-radius: 5px;
}

.fallback-text {
  font-size: 150px;
  color: #dddddd;
  font-weight: normal;
  font-family: KaiTi, STKaiti, "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", SimKai, "楷体", "楷体_GB2312";
  text-shadow: 0 0 1px #aaaaaa;
}
</style> 